<template>
	<div class="anthology">
	    <div class="anthologyList" v-for="(item,index) in filmList" :key='index' >
	    	<div class="imgBox">
	    		<img :src="item.imgUrl" alt="" />
	    	</div>
	    	<div class="contentBox">
	    		<p>{{item.filmTiTle}}</p>
	    		<p>简介:{{item.filmDesc}}</p>
	    	</div>
	    </div>
	    <div class="goTop" @click="goTop" >
	    	回到顶部
	    </div>
	</div>
</template>

<script>
export default{
	name:'searchFilmName',
	data(){
		return{
			filmList:[]
		}
	},
	methods:{
		goTop(event){
			var time;
			time=setInterval(function(){
	            var top = document.body.scrollTop||document.documentElement.scrollTop;
	            top=top*0.9;
	            document.body.scrollTop=top;
	            document.documentElement.scrollTop=top;
	            if(top==0){
	                clearInterval(time);
	            }
            },100);
		},
		cutDesc(desc){
			if (desc.length>40){
			    desc = desc.substring(0,40)+'...';
			}
			return desc;
		}
	},
	created(){
		this.$axios.get("http://127.0.0.1:3000/filmList")
	    .then(res=>{
	    	var newData=res.data.filmList;
	    	var filmList=[];
	    	for(var i=0;i<newData.length;i++){
	    		for(var j=0;j<newData[i].videoInfo.length;j++){
	    			var filmDesc=newData[i].videoInfo[2].filmDesc;
	    			var filmListObj={
	    			imgUrl:newData[i].imgUrl,
	    			filmTiTle:newData[i].filmTiTle,
	    			filmDesc:this.cutDesc(filmDesc)
	    		    }
	    		}
	    		filmList.push(filmListObj)
	    	}
	    	this.filmList=filmList;
//	    	console.log(filmList)
	    })
	    .catch(error=>{
	    	console.log(error)
	    })
	}
}
</script>

<style scoped lang="less">
@current:100rem;
	.anthology{
		margin-top: 60/@current;
		.anthologyList{
			border-bottom: 1px solid #D7D2E0;
			overflow: hidden;
			padding: 10/@current 20/@current;
			.imgBox{
				float:left;
				width: 215/@current;
				height: 145/@current;
				img{
					width: 215/@current;
					height: 145/@current;
				}
			}
			.contentBox{
				width: 370/@current;
				float:left;
				margin-left: 12/@current;
				p:nth-child(1){
					font-size: 26/@current;
					
					/*点击后的字体样式*/
					/*color: #a54be8;*/
				}
				p:nth-child(2){
					margin-top: 10/@current;
					font-size: 24/@current;
					color: #959595;
				}
			}
		}
		.goTop{
			border-radius: 15/@current;
			padding: 0 20/@current;
			height: 100/@current;
			line-height: 100/@current;
			font-size: 24/@current;
			color: #b676eb;
			position: fixed;
			right: 20/@current;
			bottom: 20/@current;
			background-color: #b676eb;
			color: white;
			opacity: .5;
		}
	}
</style>